{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/repeat_animation_by_clicking_button/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"a41cfbc6-e684-5186-bd41-762bbb6263b1","excerpt":"요구사항 ‘reload’ 버튼을 클릭할 때마다 icon이 스핀처럼 돌아가야한다. Issue classList로 add를 하면 클래스가 한 번 추가되고 ‘반복’이 안된다. add한 뒤에 remove를 해도 한 함수 안에 동일 조건에 넣으면 마지막 값만(remove이든 add) 반환한다. setTimeOut으로 구현할 수는 있으나, 좋은 방법인지에 대한 의문 Resolution window.requestAnimaiontFrame을 사용 참고 자료: stackOverFlow","html":"<p><strong>요구사항</strong></p>\n<ul>\n<li>‘reload’ 버튼을 클릭할 때마다 icon이 스핀처럼 돌아가야한다.</li>\n</ul>\n<p>I<strong>ssue</strong></p>\n<ul>\n<li>classList로 add를 하면 클래스가 한 번 추가되고 ‘반복’이 안된다.</li>\n<li>add한 뒤에 remove를 해도 한 함수 안에 동일 조건에 넣으면 마지막 값만(remove이든 add) 반환한다.</li>\n<li>setTimeOut으로 구현할 수는 있으나, 좋은 방법인지에 대한 의문</li>\n</ul>\n<p><strong>Resolution</strong></p>\n<ul>\n<li>window.requestAnimaiontFrame을 사용</li>\n<li>참고 자료: <a href=\"https://stackoverflow.com/questions/45575265/repeat-animation-by-clicking-button\">stackOverFlow</a></li>\n</ul>\n<img width=\"600\" alt=\"chat\" src=\"https://user-images.githubusercontent.com/36187948/81469692-66883500-9221-11ea-9166-2b17ceabdfe7.png\">\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token function\">refresh</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> reload <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>el<span class=\"token punctuation\">.</span>nativeElement<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.reload-i'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>loader$<span class=\"token punctuation\">.</span><span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token string\">'after'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    reload<span class=\"token punctuation\">.</span>classList<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token string\">'spin'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    window<span class=\"token punctuation\">.</span><span class=\"token function\">requestAnimationFrame</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n      reload<span class=\"token punctuation\">.</span>classList<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span><span class=\"token string\">'spin'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"scss\"><pre class=\"language-scss\"><code class=\"language-scss\"><span class=\"token selector\">.spin </span><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">animation</span><span class=\"token punctuation\">:</span> spin 1s linear<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token atrule\"><span class=\"token rule\">@keyframes</span> spin</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token selector\">0% </span><span class=\"token punctuation\">{</span>\n    <span class=\"token property\">transform</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rotate</span><span class=\"token punctuation\">(</span>0deg<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">100% </span><span class=\"token punctuation\">{</span>\n    <span class=\"token property\">transform</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rotate</span><span class=\"token punctuation\">(</span>360deg<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"title":"repeat animation by clicking button","date":"January 17, 2020"}}},"pageContext":{"slug":"/Today I Learned/repeat_animation_by_clicking_button/","previous":{"fields":{"slug":"/Angular/Activated_Route의_구독과_해제/"},"frontmatter":{"title":"Activated Route의 구독과 해제","category":"Angular","draft":false}},"next":{"fields":{"slug":"/Today I Learned/scss_@mixin_문법_사용해서_hover값_주기/"},"frontmatter":{"title":"scss @mixin 문법 사용해서 hover값 주기","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}